<template>
    <div class="popUp" :style="{ height: popUpHeight }" v-if="showPop">
        <div class="popUp-close" @click="close"></div>
        <div class="popUp-content">
            <div class="popUp-content-tabBar">
                <div class="popUp-content-tabBar-tabList">
                    <div @click="showContent('对象属性')"
                        style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
                        <div :class="{ 'selectedTab': selectedTab === '对象属性' }">
                            对象属性
                        </div>
                        <div v-if="selectedTab === '对象属性'" style="width: 90px;height: 3px;background: #00AEBF;"></div>
                    </div>
                    <div @click="showContent('关联信息')"
                        style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
                        <div :class="{ 'selectedTab': selectedTab === '关联信息' }">
                            关联信息
                        </div>
                        <div v-if="selectedTab === '关联信息'" style="width: 90px;height: 3px;background: #00AEBF;"></div>
                    </div>
                    <div @click="showContent('关联对象')"
                        style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
                        <div :class="{ 'selectedTab': selectedTab === '关联对象' }">
                            关联对象
                        </div>
                        <div v-if="selectedTab === '关联对象'" style="width: 90px;height: 3px;background: #00AEBF;"></div>
                    </div>
                </div>
            </div>
            <div v-if="selectedTab === '对象属性'" class="popUp-content-attribute">
                <div class="popUp-content-attribute-listBox" v-for="(item, i) in listData" :key="i">
                    <div style="display: flex;align-items: center;" class="bgc">
                        <div class="popUp-content-attribute-circle"></div>
                        <div class="popUp-content-attribute-textName">{{ item.name }}</div>
                    </div>
                    <div class="popUp-content-attribute-textContent">{{ item.text }}</div>
                </div>
                <div class="popUp-content-especial">
                    <div style="display: flex;align-items: center;" class="bgc">
                        <div class="popUp-content-attribute-circle"></div>
                        <div class="popUp-content-attribute-textName">套管型电流互感器</div>
                    </div>
                    <div class="popUp-content-attribute-textContent">2号变压器</div>
                </div>
            </div>
            <div v-if="selectedTab === '关联信息'" class="popUp-content-message">
                <div class="popUp-content-message-monitor">
                    <span>· 变压器在线监测信息</span>
                </div>
                <div class="popUp-content-message-list">
                    <div class="popUp-content-message-list-listHeader">
                        <div style="margin-left: 10px">监测类型</div>
                        <div>/</div>
                        <div style="margin-right: 15px">值</div>
                    </div>
                    <div class="popUp-content-message-list-listContent userFlex">
                        <div class="popUp-content-message-list-listContent-rowSize" v-for="(item, index) in messageData"
                            :key="index">
                            <div style="display: flex;align-items: center;width: 57%">
                                <div
                                    style="width: 4px;height: 4px;border-radius: 4px;background-color: #BAE5F3;margin-right: 10px">
                                </div>
                                <div>{{ item.name }}</div>
                            </div>
                            <div style="width: 9%">/</div>
                            <div style="width: 32%;text-align: right">{{ item.result }}</div>
                        </div>
                    </div>
                </div>
                <div class="popUp-content-message-monitor" style="margin-top: 36px">
                    <span>· 图纸及文档</span>
                </div>
                <div class="popUp-content-message-document">
                    <div class="popUp-content-message-document-pdf">
                        <div class="popUp-content-message-document-pdf-pdfImg pdf"></div>
                        <div>变电站.pdf</div>
                        <div>2023-11-17</div>
                    </div>
                    <div class="popUp-content-message-document-pdf">
                        <div class="popUp-content-message-document-pdf-pdfImg word"></div>
                        <div>编号.word</div>
                        <div>2023-11-17</div>
                    </div>
                    <div class="popUp-content-message-document-pdf">
                        <div class="popUp-content-message-document-pdf-pdfImg xls"></div>
                        <div>设备号.xls</div>
                        <div>2023-11-17</div>
                    </div>
                </div>
            </div>
            <div v-if="selectedTab === '关联对象'" class="popUp-content-relevance">
                <div class="popUp-content-relevance-monitor">
                    <span style="margin-left: 25px;">· 异常动态监控</span>
                </div>
                <div class="popUp-content-relevance-table">
                    <div class="popUp-content-relevance-table-header">
                        <div>编号</div>
                        <div>异常对象</div>
                        <div>监控结果</div>
                    </div>
                    <div class="popUp-content-relevance-table-content userFlex">
                        <div class="popUp-content-relevance-table-content-list" v-for="(item, index) in stateData"
                            :key="index" :class="{ 'normal': item.result === '正常', 'abnormal': item.result !== '正常' }">
                            <div>0{{ index + 1 }}</div>
                            <div>{{ item.name }}</div>
                            <div style="display: flex;align-items: center">
                                <div
                                    :class="{ 'status-normal': item.result === '正常', 'status-abnormal': item.result !== '正常' }">
                                </div>
                                <div :class="{ 'text1': item.result === '正常', 'text2': item.result !== '正常' }">{{
                                    item.result }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="kaiguan">
            <div class="kai" @click="kai(0)"></div>
            <div class="he" @click="kai(1)"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, inject, onMounted } from "vue";
import { sendToUeMsg } from '@/utils/UeMessageUtils'
import eventBus from '../utils/EventBus.js';


const close = inject('close')
// 设置状态用于控制显示哪个选项卡
const selectedTab = ref("对象属性");
const showPop = ref(true)
// 点击选项卡时更新状态
const showContent = (tabName) => {
    selectedTab.value = tabName;
};

eventBus.on('tabChange', (tab) => {
    // 在这里接收来自 App.vue 发送的事件并做出相应的处理
    if (tab === 'overall') {
        showPop.value = false
    } else if (tab === 'three') {
        // showPop.value = false
    } else if (tab === 'synthesis') {
        showPop.value = false
    }
    // 进行其他操作...
});
eventBus.on('menuChanges', (tab) => {
    // 在这里接收来自 App.vue 发送的事件并做出相应的处理
    console.log('menuChanges', tab);
    if (tab === 'freewalk') {
        showPop.value = false
    }else if (tab === 'defaultwalk') {
        showPop.value = false
    }
    // 进行其他操作...
});
eventBus.on('tabChanges', (tab) => {
    // 在这里接收来自 App.vue 发送的事件并做出相应的处理
    console.log('tabChanges', tab);
    if (tab === 'overall') {
        showPop.value = false
    }
    // 进行其他操作...
});

const kai = (num) => {
    sendToUeMsg({
        breakdown: num,
    })
}


const listData = ref([
    {
        name: "产品名称",
        text: "2号变压器",
    },
    {
        name: "额定电压",
        text: "200kv",
    },
    {
        name: "联接组标号",
        text: "123456",
    },
    {
        name: "绝缘条件",
        text: "绝缘条件",
    },
    {
        name: "额定容量",
        text: "220m³",
    },
    {
        name: "额定频率",
        text: "11",
    },
    {
        name: "冷却方式",
        text: "冷却方式",
    },
    {
        name: "产品规格",
        text: "产品规格",
    },
    {
        name: "额定电流",
        text: "20A",
    },
    {
        name: "分接头位置",
        text: "分接头",
    },

]);
const stateData = ref([
    {
        name: "东卧线TV二次电压",
        result: '正常'
    },
    {
        name: "110kV佛旗线路保护屏",
        result: '异常'
    },
    {
        name: "110kV母差保护屏",
        result: '正常'
    },
    {
        name: "地网接入屏",
        result: '正常'
    },
    {
        name: "东卧线TV开关",
        result: '异常'
    },
    {
        name: "东卧线TV电阻",
        result: '正常'
    },
    {
        name: "通信接口柜",
        result: '正常'
    },
    {
        name: "东卧线TV二次电压",
        result: '正常'
    },
    {
        name: "地网接入屏3",
        result: '正常'
    },
]);
const messageData = ref([
    {
        name: "高厂变氢气H2(ppm)",
        result: '3.75'
    },

    {
        name: "高厂变总烃 (ppm)",
        result: '9.41'
    },
    {
        name: "高厂变一氧化碳CO(ppm)",
        result: '761.46'
    },
    {
        name: "高厂变二氧化碳CO2(ppm)",
        result: '1357.91'
    },
    {
        name: "高厂变甲烷CH4(ppm)",
        result: '8.31'
    },
    {
        name: "高厂变乙烷C2H6(ppm)",
        result: '1.4'
    },
    {
        name: "高厂变乙炔C2H2(ppm)",
        result: '0'
    },
    {
        name: "高厂变乙烯C2H4 (ppm)",
        result: '1.7'
    },

]);
</script>

<style lang="scss" scoped>
.popUp {
    width: 400px;
    height: 523px !important;
    background-image: url("../assets/images/home/bgc_pop2.png");
    background-size: 100% 100%;
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000 !important;


    &-content {
        width: 232px;
        height: 152px;

        &-tabBar {
            width: 350px;
            height: 37px;
            margin-top: 22px;
            margin-left: 24px;
            background-image: url("../assets/images/home/bgc_adorn.png");
            background-size: 100% 100%;

            &-tabList {
                width: 282px;
                height: 35px;
                margin-left: 35px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 16px;
                font-family: 58 WindFont, 58 WindFont;
                font-weight: 400;
                color: #BAE5F3;
            }
        }

        &-attribute {
            width: 400px;
            height: 406px;
            margin-left: 24px;

            &-listBox {
                display: flex;
                align-items: center;
                width: 182px;
                height: 26px;
                border: 1px solid rgba(186, 229, 243, 0.3);
                margin-top: 12px;

            }

            &-circle {
                width: 4px;
                height: 4px;
                background: #000000;
                border: 1px #00C0FF solid;
                margin-right: 8px;
            }

            &-textName {
                font-size: 14px;
                font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                font-weight: normal;
                color: #BAE5F3 !important;
                line-height: 16px;

            }

            &-textContent {
                font-size: 14px;
                font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                font-weight: normal;
                color: #7CDFFF;
                line-height: 16px;
                margin-left: 12px;
            }
        }

        &-relevance {
            width: 350px;
            height: 399px;
            margin-top: 27px;
            margin-left: 34px;

            &-monitor {
                width: 170px;
                height: 32px;
                background: linear-gradient(90deg, rgba(105, 193, 221, 0.7) 0%, rgba(105, 193, 221, 0) 100%);
                font-size: 16px;
                font-family: 58 WindFont, 58 WindFont;
                font-weight: 400;
                color: #D9F6FF;
                line-height: 32px;
            }

            &-table {
                width: 340px;
                height: 346px;
                margin-top: 15px;

                &-header {
                    width: 340px;
                    height: 22px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 16px;
                    font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                    font-weight: normal;
                    color: #7CDFFF;
                    line-height: 22px;
                    letter-spacing: 1px;
                    border-bottom: 1px solid rgba(195, 210, 221, 0.2);

                }

                &-content {
                    width: 340px;
                    height: 312px;

                    &-list {
                        width: 320px;
                        height: 30px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-size: 14px;
                        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                        font-weight: normal;
                        padding: 0 15px 0 10px;
                        margin-top: 10px;
                    }

                }
            }
        }

        &-message {
            width: 342px;
            height: 589px;
            margin-top: 27px;
            margin-left: 34px;

            &-monitor {
                margin-top: 27px;
                width: 200px;
                height: 30px;
                background: linear-gradient(90deg, rgba(105, 193, 221, 0.7) 0%, rgba(105, 193, 221, 0) 100%);
                font-size: 16px;
                font-family: 58 WindFont, 58 WindFont;
                font-weight: 400;
                color: #D9F6FF;
                line-height: 30px;
                padding-left: 15px;
                margin-bottom: 16px;
            }

            &-list {
                width: 100%;
                height: 150px;
                margin-bottom: 50px;

                &-listHeader {
                    width: 100%;
                    height: 31px;
                    border-bottom: 1px solid rgba(195, 210, 221, 0.2);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 16px;
                    font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                    font-weight: normal;
                    color: #7CDFFF;
                    line-height: 19px;
                    letter-spacing: 1px;
                    // margin-bottom: 11px;
                }

                &-listContent {
                    width: 100%;
                    height: 150px;
                    // display: flex;
                    // flex-direction: column;
                    // justify-content: space-between;

                    &-rowSize {
                        width: 100%;
                        height: 20px;
                        display: flex;
                        //justify-content: space-between;
                        align-items: center;
                        font-size: 14px;
                        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                        font-weight: normal;
                        color: #BAE5F3;
                        margin-top: 10px;
                    }
                }
            }

            &-document {
                width: 402px;
                height: 100px;
                display: flex;
                margin-top: 30px;

                &-pdf {
                    width: 70px;
                    height: 100%;
                    font-size: 12px;
                    font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
                    font-weight: normal;
                    color: #FFFFFF;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    margin-right: 37px;

                    &-pdfImg {
                        width: 48px;
                        height: 55px;
                        background-image: url("../assets/images/home/pdf.png");
                        background-size: 100% 100%;
                        margin: 0 auto;
                    }

                    .word {
                        background-image: url("../assets/images/home/word.png");
                        background-size: 100% 100%;
                    }

                    .xls {
                        background-image: url("../assets/images/home/xls.png");
                        background-size: 100% 100%;
                    }
                }
            }
        }

        &-especial {
            width: 268px;
            height: 26px;
            display: flex;
            align-items: center;
            margin-top: 12px;
            border: 1px solid rgba(186, 229, 243, 0.3);
        }
    }

    &-close {
        width: 44px;
        height: 44px;
        background-image: url("../assets/images/home/icon_close.png");
        background-size: 100% 100%;
        float: right;
    }

    .kaiguan {
        width: 168px;
        height: 66px;
        position: fixed;
        bottom: 0px;
        left: -130%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 99;

        .kai {
            width: 66px;
            height: 66px;
            background-image: url("../assets/images/home/kai.png");
            background-size: 100% 100%;
        }

        .he {
            width: 66px;
            height: 66px;
            background-image: url("../assets/images/home/he.png");
            background-size: 100% 100%;
        }
    }


}



.normal {
    color: #BAE5F3;
    background-image: url("../assets/images/home/bgc_normal.png");
    background-size: 100% 100%;
}

.abnormal {
    color: #FF7B7B;
    background-image: url("../assets/images/home/bgc_abnormal.png");
    background-size: 100% 100%;
}

.status-normal {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background-color: #94ffb2;
    /* 正常状态颜色：绿色 */
    margin-right: 10px;
}

.status-abnormal {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background-color: #FF7B7B;
    /* 异常状态颜色：红色 */
    margin-right: 10px;
}

.selectedTab {
    font-size: 16px;
    font-family: 58 WindFont, 58 WindFont;
    font-weight: 400;
    line-height: 23px;
    background: linear-gradient(180deg, #DFF7FF 0%, #00C0FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text1 {
    color: #94ffb2;
}

.text2 {
    color: #FF7B7B;
}

.userFlex {
    scrollbar-width: none;
    /* firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
    overflow-y: auto;
}

.userFlex::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
}

.bgc {
    //width: 100%;
    height: 100%;
    background-image: url("../assets/images/home/bgc1.png");
    background-size: 100% 100%;
    padding: 0 8px;
}

.xls:hover {
    width: 48px;
    height: 55px;
    background-image: url("../assets/images/home/xia1.png");
    background-size: 100% 100%;
}

.word:hover {
    width: 48px;
    height: 55px;
    background-image: url("../assets/images/home/xia.png");
    background-size: 100% 100%;
}

.pdf:hover {
    width: 48px;
    height: 55px;
    background-image: url("../assets/images/home/xia2.png");
    background-size: 100% 100%;
}
</style>